<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          我的媒体库
        </h2>
      </div>
    </div>
  </div>
</div>
{% if EmbySucess == 1 %}
<div class="page-body">
  <div class="container-xl">
    <div class="row row-deck row-cards">
      <div class="col-sm-3 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">电影</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-0 me-2">{{ MediaCount.MovieCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">电视剧</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ MediaCount.SeriesCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">音乐</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ MediaCount.SongCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">活跃用户</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ UserCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="row row-cards">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <p class="mb-3">存储空间共 <strong>{{ TotalSpace }}</strong></p>
                <div class="progress progress-separated mb-3">
                  <div class="progress-bar bg-primary" role="progressbar" style="width: {{ UsedPercent }}%"></div>
                </div>
                <div class="row">
                  <div class="col-auto d-flex align-items-center pe-2">
                    <span class="legend me-2 bg-primary"></span>
                    <span>已使用</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ UsedSapce }}</span>
                  </div>
                  <div class="col-auto d-flex align-items-center ps-2">
                    <span class="legend me-2"></span>
                    <span>空闲</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ FreeSpace }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="card" style="height: 28rem">
              <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                <div class="divide-y">
                  {% for Activity in Activitys %}
                  <div>
                    <div class="row">
                      <div class="col-auto">
                        <span class="avatar">{{ Activity.type }}</span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          {{ Activity.event }}
                        </div>
                        <div class="text-muted">{{ Activity.date }}</div>
                      </div>
                      <div class="col-auto align-self-center">
                        <div class="bg-primary"></div>
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="page-wrapper">
  <div class="container-xl">
  </div>
  <div class="page-body">
    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="./static/img/bug_fixing.svg" height="128"  alt="">
        </div>
        <p class="empty-title">Emby连接失败！</p>
        <p class="empty-subtitle text-muted">
          当前无法连接Emby服务器获取数据，请确认配置是否正确。
        </p>
      </div>
    </div>
  </div>
</div>
{% endif %}
